<template>
	<div class="personnelList agentAdd">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }">
				<i class="lh lh-caiwu fw_100"></i>
			</el-breadcrumb-item>
			<el-breadcrumb-item>代理商管理</el-breadcrumb-item>
			<el-breadcrumb-item>{{ breadcrumb_name }}</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="content_Box box-shadow">
			<div>
				<h4 class="title border-bottom">{{ breadcrumb_name }}</h4>
				<div class="cont">
					<el-row>
						<el-col :span="24">
							<div class="flex-container">
								<div class="label-name"><i class="lhadmin lhadmin-wujiaoxing"></i>角色名称：</div>
								<div>
									<el-input v-model="addRoleArr.name"></el-input>
								</div>
							</div>
						</el-col>
						<el-col :span="24">
							<div class="flex-container">
								<div class="label-name"><i class="lhadmin lhadmin-wujiaoxing"></i>商务：</div>
								<div>
									<el-radio v-model="addRoleArr.is_business" label="1">是</el-radio>
									<el-radio v-model="addRoleArr.is_business" label="2">否</el-radio>
									<span class="text-gray"> 选择是，则创建商机时出现在商务负责人列表 </span>
								</div>
							</div>
						</el-col>
						<el-col :span="24">
							<div class="flex-container">
								<div class="label-name">备注：</div>
								<div>
									<el-input type="textarea" :rows="3" v-model="addRoleArr.desc" placeholder="请输入内容"></el-input>
								</div>
							</div>
						</el-col>
					</el-row>
				</div>
				<div class="mb_10 roleFunctionBox" v-for="(item, index) in roleFunctionArr" :key="index">
					<div class="roleTitle">
						<h3>
							<span class="mr_10">{{ item.name }}</span>
							<span class="">
								<el-checkbox v-model="item.checkAllShow" @change="handleCheckAllChange($event, index)"
									>全选</el-checkbox
								>
							</span>
						</h3>
					</div>
					<div class="flex-container" v-for="(child, index) in item.child" :key="index">
						<div class="menuName fl">{{ child.name }} :</div>
						<div class="menFunction fl">
							<el-checkbox-group v-model="addRoleArr.permissions">
								<el-checkbox v-for="it in child.child" :label="it.id" :key="it.id">{{ it.name }}</el-checkbox>
							</el-checkbox-group>
						</div>
						<div class="clear"></div>
					</div>
				</div>
			</div>
			<div class="footer">
				<el-button round @click="back()">返回</el-button>
				<el-button type="primary" round @click="save()">保存</el-button>
			</div>
		</div>
	</div>
</template>

<script>
var common = require('../../../static/tool.js')
import { agentRoleInfo, fetchMenulist, agentEditRole, agentAddRole } from '@/api/agent.js'
export default {
	name: 'agentAdd',
	data() {
		return {
			manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
			url: common.url,
			head_url: common.head_url,
			breadcrumb_name: '新增角色',
			id: '',

			//添加角色
			addRoleArr: {
				name: '',
				is_business: '',
				permissions: [],
				desc: '',
				type: 2
			},
			roleFunctionArr: [], //权限列表
			list: [] //人才账单列表
		}
	},
	mounted() {
		if (this.$route.query.id) {
			this.id = this.$route.query.id
			this.breadcrumb_name = '编辑角色'
		}
		this.getMenulist() //获取角色权限数据
	},
	methods: {
		async getAgentRoleInfo() {
			try {
				let res = await agentRoleInfo({
					id: this.id
				})
				this.addRoleArr.name = res.name
				this.addRoleArr.is_business = res.is_business.toString()
				this.addRoleArr.desc = res.desc

				let list = []
				for (let i = 0; i < this.roleFunctionArr.length; i++) {
					list.push(...this.roleFunctionArr[i].child)
				}

				console.log(list)
				for (let i = 0; i < res.permissions.length; i++) {
					for (let n = 0; n < list.length; n++) {
						for (let w = 0; w < list[n].child.length; w++) {
							if (+list[n].child[w].id === +res.permissions[i]) {
								this.addRoleArr.permissions.push(+res.permissions[i])
							}
						}
					}
				}
				console.log(this.addRoleArr.permissions)
				return
			} catch (err) {
				console.log(err)
			}
		},
		// 添加/保存
		async save(params = {}) {
			try {
				if (!this.addRoleArr.name || !this.addRoleArr.is_business) {
					return this.$message.error('请填写必填项！')
				}
				const reqParams = this.computedParams(params)

				if (this.id) {
					await agentEditRole({
						...reqParams,
						id: this.id
					})
				} else {
					await agentAddRole({
						...reqParams
					})
				}
				this.$message.success(`${this.id ? '修改成功' : '添加成功'}`)
				this.back()
			} catch (err) {
				console.log(err)
			}
		},

		computedParams(params = {}) {
			const { type, is_business, permissions, ...rest } = this.addRoleArr

			let list = []
			let parent_id_arr = []

			for (let i = 0; i < this.roleFunctionArr.length; i++) {
				list.push(this.roleFunctionArr[i])
			}

			for (let i = 0; i < list.length; i++) {
				for (let n = 0; n < list[i].child.length; n++) {
					console.log(list[i])
					for (let w = 0; w < list[i].child[n].child.length; w++) {
						if (permissions.indexOf(list[i].child[n].child[w].id) != -1) {
							if (parent_id_arr.indexOf(list[i].child[n].id) === -1) {
								parent_id_arr.push(list[i].child[n].id)
							}
							if (parent_id_arr.indexOf(list[i].id) === -1) {
								parent_id_arr.push(list[i].id)
							}
						}
					}
				}
			}

			let permissions_arr = [...parent_id_arr, ...permissions]
			console.log(permissions_arr)
			return {
				...rest,
				type: +type,
				is_business: +is_business,
				permissions: permissions_arr.join(','),
				...params
			}
		},

		// 获取权限数据
		async getMenulist() {
			try {
				let ret = await fetchMenulist()
				ret.forEach(it => {
					it.checkAllShow = false
					it.checkedCities = []
				})

				this.roleFunctionArr = [...ret]
				if (this.id) this.getAgentRoleInfo()
			} catch (err) {
				console.log(err)
			}
		},

		// 全选
		handleCheckAllChange(type, index) {
			let roleFunctionArr = [...this.roleFunctionArr[index].child] //角色权限数组
			console.log(roleFunctionArr)
			let checkedCities = []
			if (type) {
				for (let i = 0; i < roleFunctionArr.length; i++) {
					for (let k = 0; k < roleFunctionArr[i].child.length; k++) {
						this.addRoleArr.permissions.push(+roleFunctionArr[i].child[k].id)
					}
				}
				for (let b = 0; b < this.addRoleArr.permissions.length; b++) {
					if (checkedCities.indexOf(this.addRoleArr.permissions[b]) === -1) {
						checkedCities.push(+this.addRoleArr.permissions[b])
					}
				}
				this.addRoleArr.permissions = checkedCities
			} else {
				let arr = []
				for (let i = 0; i < roleFunctionArr.length; i++) {
					for (let k = 0; k < roleFunctionArr[i].child.length; k++) {
						arr.push(roleFunctionArr[i].child[k].id)
					}
				}
				for (let m = 0; m < arr.length; m++) {
					for (let j = 0; j < this.addRoleArr.permissions.length; j++) {
						if (this.addRoleArr.permissions[j] == arr[m]) {
							this.addRoleArr.permissions.splice(j, 1)
						}
					}
				}
			}
			this.roleFunctionArr[index].checkedCities = checkedCities
			console.log(checkedCities)
		},

		//重置
		async resetBtn() {
			this.resetData()
		},
		//重置请求数据
		resetData() {
			this.pageNum = 1
			for (let key in this.query) {
				this.query[key] = ''
			}
		},

		back() {
			this.$router.go(-1)
		}
	},
	filters: {}
}
</script>

<style scoped>
.flex-container {
	display: flex;
	line-height: 40px;
}
.content_Box {
	padding: 10px;
}
.content_Box .title {
	padding-bottom: 10px;
}
.content_Box .cont {
	padding: 20px 0;
	font-size: 14px;
}
.content_Box .label-name {
	width: 120px;
	text-align: right;
	color: #666666;
}
.agentAdd .line {
	height: 5px;
}
.city-checkout {
	border-bottom: 1px dashed #ebebeb;
	padding: 10px 0;
}
.city-checkout:last-child {
	border-bottom: none;
}
.all-selected {
	color: #222222;
}
.footer {
	padding: 50px 0 50px 200px;
}
.footer button {
	width: 100px;
	margin-left: 40px;
}
.roleFunctionBox {
	padding: 10px 10px 20px 10px;
	border: 1px solid #ebebeb;
}
.roleFunctionBox .roleTitle {
	border-bottom: 1px solid #ebebeb;
	padding-bottom: 10px;
}
.roleFunctionBox .menFunction {
	margin: 12px 0 0 12px;
}
.roleFunctionBox .menuName {
	min-width: 100px;
	margin: 10px 10px 0 0;
}
.flex-container {
	display: -webkit-flex;
	display: flex;
}
</style>
<style>
.agentAdd .el-input__inner,
.agentAdd .el-textarea__inner {
	width: 300px;
}
.agentAdd .el-checkbox-group .el-checkbox {
	min-width: 120px;
}
</style>



// WEBPACK FOOTER //
// src/components/agent/RoleAdd.vue